<template>
  <a-layout class="main-layout">
    <!-- 侧边菜单栏 -->
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible :width="250">
      <!-- 菜单栏logo -->
      <div class="logo">
        <span v-if="!collapsed">Adjust市场分析后台</span>
        <appstore-outlined v-else />
      </div>

      <!-- 菜单栏 -->
      <div v-if="menuList">
        <a-menu
          theme="dark"
          mode="inline"
          v-model:selectedKeys="selectedKeys"
          v-for="(menuItem, index) in menuList.login_perm"
          :key="menuItem.id"
        >
          <a-menu-item :key="index">
            <router-link :to="'/home/' + menuItem.permission">
              <custom-icon type="icon-yingyong" />
              <span>{{ menuItem.menuName }}</span>
            </router-link>
          </a-menu-item>
        </a-menu>
      </div>
    </a-layout-sider>
    <!-- 右侧主内容模块 -->
    <a-layout>
      <!-- 内容模块顶部 -->
      <a-layout-header class="layout-header">
        <a-row>
          <a-col flex="60px">
            <menu-unfold-outlined
              class="menu-trigger"
              v-if="collapsed"
              @click="() => (collapsed = !collapsed)"
            />
            <menu-fold-outlined
              v-else
              class="menu-trigger"
              @click="() => (collapsed = !collapsed)"
            />
          </a-col>
          <a-col flex="auto">
            <div class="header-content">
              <a-popover trigger="click" v-if="menuList">
                <template #content>
                  <ul class="user-ul">
                    <li><a>个人主页</a></li>
                    <li><a>用户中心</a></li>
                    <li><a @click="loginOut">退出登录</a></li>
                  </ul>
                </template>
                <a-button type="link" style="color:#2e2f33">
                  {{ menuList.name }}
                  <CaretDownOutlined />
                </a-button>
              </a-popover>
            </div>
          </a-col>
        </a-row>
      </a-layout-header>
      <!-- 主内容 -->
      <a-layout-content>
        <div style="background:#fff; height:40px">
          <a-tabs v-model:activeKey="activeKey" type="editable-card" hide-add>
            <a-tab-pane
              v-for="pane in panes"
              :key="pane.key"
              :tab="pane.title"
              :closable="pane.closable"
            ></a-tab-pane>
          </a-tabs>
        </div>
        <div class="router-view-content">
          <router-view></router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts">
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  AppstoreOutlined,
  CaretDownOutlined,
} from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
import { HttpResult, getRequest } from '@/common/http/http-request';
import { MenuData } from '@/api/model-declare';
// 引入自定义图标
import { createFromIconfontCN } from '@ant-design/icons-vue';
import iconfontjs from '@/assets/iconfont.js';
const CustomIcon = createFromIconfontCN({
  // 在 iconfont.cn 上生成,使用自己的项目地址
  // scriptUrl: '//at.alicdn.com/t/font_2513673_bp9msbh639p.js',
  scriptUrl: iconfontjs,
});
export default defineComponent({
  components: {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    AppstoreOutlined,
    CaretDownOutlined,
    CustomIcon,
  },
  setup() {
    const router = useRouter();
    // 菜单列表
    const menuList = ref<MenuData>();
    // tab panes集合
    const tabPanes = ref();

    getRequest<MenuData>('/api/admin/permission/management').then(
      (response: HttpResult<MenuData>) => {
        menuList.value = response.data;
      }
    );

    // 用户登出
    let loginOut = () => {
      window.localStorage.removeItem('TOKEN');
      router.push('/login');
    };

    const panes = ref([
      { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
      { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
    ]);
    const activeKey = ref(panes.value[0].key);

    return {
      selectedKeys: ref<number[]>([0]),
      collapsed: ref<boolean>(false),
      menuList,
      loginOut,
      panes,
      activeKey,
    };
  },
});
</script>

<style lang="scss" scoped>
// 整体布局
.main-layout {
  width: 100%;
  height: 100%;
}

//右侧主内容顶部布局
.layout-header {
  background: #fff;
  padding: 0;
  height: 60px;
  line-height: 60px;
}

// 内容主页顶部
.header-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-right: 30px;
}
// 内容页面用户下拉菜单
.user-ul {
  li {
    width: 100%;
    height: 30px;
    line-height: 30px;
    a {
      color: #222222;
      &:hover {
        color: #1890ff;
      }
    }
  }
}

// 菜单显示与隐藏
.menu-trigger {
  font-size: 18px;
  line-height: 50px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
.menu-trigger:hover {
  color: #1890ff;
}

.logo {
  color: #fff;
  white-space: nowrap;
  font-size: 24px;
  margin: 16px;
  text-align: center;
}

.router-view-content {
  width: 100%;
  height: 100%;
  margin: 16px;
  padding: 0 24px;
  background: #fff;
}

.ant-tabs-tab-active {
  background-color: pink;
}
</style>
